<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>history 对象练习</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        pre {
            background-color: #f4f4f4;
            padding: 15px;
            border-radius: 5px;
            white-space: pre-wrap;
        }

        button {
            margin: 5px 0;
        }
    </style>
</head>
<body>

<h1>history 对象练习</h1>

<h2>当前历史信息：</h2>
<pre id="output"></pre>

<h3>功能测试：</h3>
<button onclick="showHistoryInfo()">显示当前历史记录长度</button>
<br>
<button onclick="goBack()">返回上一页（如存在）</button>
<br>
<button onclick="goForward()">前进一页（如存在）</button>
<br>
<button onclick="goToPrevious(1)">后退 1 页</button>
<br>
<button onclick="addNewHistoryState()">添加新历史记录状态</button>
<br>
<button onclick="replaceCurrentState()">替换当前历史记录状态</button>
<br>

<script>
    /**
     * history 对象常用属性和方法：
     * - back()：回退到上一个页面
     * - forward()：前进到下一个页面
     * - go(n)：向前或向后移动 n 页
     * - pushState(state, title, url)：添加一条新的历史记录
     * - replaceState(state, title, url)：替换当前历史记录
     * - length：获取历史记录条目数量
     */

    function showHistoryInfo() {
        const info = `
            history.length: ${history.length}
            当前 URL: ${location.href}
            `;
        document.getElementById("output").textContent = info;
    }

    function goBack() {
        history.back();
    }

    function goForward() {
        history.forward();
    }

    function goToPrevious(n) {
        history.go(-n);
    }

    let stateCount = 0;

    function addNewHistoryState() {
        stateCount++;
        const newState = {page: stateCount};
        const newTitle = "Page " + stateCount;
        const newURL = "?page=" + stateCount;

        // 添加新的历史记录并修改 URL（不会刷新页面）
        history.pushState(newState, newTitle, newURL);

        alert("已添加新状态到历史记录：" + newURL);
        showHistoryInfo();
    }

    function replaceCurrentState() {
        const newState = {replaced: true};
        const newTitle = "Replaced State";
        const newURL = "?replaced=1";

        // 替换当前历史记录
        history.replaceState(newState, newTitle, newURL);

        alert("已替换当前历史记录为：" + newURL);
        showHistoryInfo();
    }

    // 页面加载时自动显示一次
    window.onload = function () {
        showHistoryInfo();
    };

    // 监听 popstate 事件（当用户点击浏览器的前进/后退按钮时触发）
    window.onpopstate = function (event) {
        console.log("popstate 触发，当前状态：", event.state);
        alert("您点击了浏览器的前进/后退按钮");
    };
</script>

</body>
</html>
